<script setup lang="ts">
import ReCol from "@/components/ReCol";
import { ref } from "vue";

const props = withDefaults(defineProps<{
  formInline: {
    name: string;
    spent_start: number;
    spent_end: number | null;
    remark: string;
  }
}>(), {
  formInline: () => ({
    name: "",
    spent_start: 0,
    spent_end: null,
    remark: ""
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });

const formRules = {
  name: [
    { required: true, message: "等级名称不能为空", trigger: "blur" },
    { min: 2, max: 20, message: "等级名称长度应在2-20个字符", trigger: "blur" }
  ],
  spent_start: [
    { required: true, message: "起始金额不能为空", trigger: "blur" }
  ]
};
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="100px"
  >
    <el-row :gutter="30">
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="等级名称" prop="name">
          <el-input
            v-model="newFormInline.name"
            clearable
            placeholder="请输入等级名称，如：VIP客户、普通客户"
            style="width: 100%"
          />
        </el-form-item>
      </re-col>

      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="消费额范围" prop="spent_start">
          <div style="display: flex; align-items: center; gap: 15px; width: 100%;">
            <div style="flex: 1;">
             <el-input-number
                v-model="newFormInline.spent_start"
                :min="0"
                :max="999999999"
                :step="100"
                :precision="2"
                style="width: 100%"
                placeholder="0"
                controls-position="right"
              />
            </div>
            <div style="color: #909399; font-size: 18px; font-weight: bold;">-</div>
            <div style="flex: 1;">
              <el-input-number
                v-model="newFormInline.spent_end"
                :min="0"
                :max="999999999"
                :step="100"
                :precision="2"
                style="width: 100%"
                placeholder="不限制"
                controls-position="right"
              />
            </div>
          </div>
          <div style="color: #909399; font-size: 12px; margin-top: 8px; line-height: 1.4;">
            <i class="el-icon-info" style="margin-right: 3px; color: #409eff;"></i>
            设置客户消费金额范围，起始金额为必填项，结束金额留空表示无上限
          </div>
        </el-form-item>
      </re-col>


      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="备注说明" prop="remark">
          <el-input
            v-model="newFormInline.remark"
            :rows="3"
            type="textarea"
            placeholder="请输入等级说明，如：该等级客户享受的服务和权益"
            style="width: 100%"
          />
        </el-form-item>
      </re-col>

      <re-col :value="24" :xs="24" :sm="24">
        <div style="background: #f5f7fa; padding: 15px; border-radius: 6px; margin-top: 0px; margin-bottom: 28px;">

          <div style="color: #909399; font-size: 13px; line-height: 1.5;">
            • 系统每日凌晨自动根据消费额更新客户等级<br>
            • 请合理设置等级间隔，避免范围重叠
          </div>
        </div>
      </re-col>
    </el-row>
  </el-form>
</template>

<style scoped lang="scss">
:deep(.el-input-number) {
  .el-input__inner {
    text-align: left;
  }
}
</style> 